<template>
  <el-dialog title="添加产品制程" v-model="props.addProductDialog" width="55%" @close="handleCancel" align-center
             append-to-body>
    <el-form :model="form" style="margin: 20px" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品物料编码">
            <el-input v-model="form.productCode" readonly placeholder="请选择产品">
              <template #append>
                <el-button @click="selectedRank">
                  <el-icon>
                    <Search/>
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品物料名称">
            <el-input v-model="form.productName" readonly placeholder="请选择产品"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位">
            <el-input v-model="form.unit" readonly placeholder="请选择产品"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="规格型号">
        <el-input v-model="form.specification" readonly placeholder="请选择产品"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
    <select-product-dialog :findProductDialog="selectProduct" @close="closeProduct" @selectProduct="dataProduct"/>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
import selectProductDialog from "./SelectProductDialog.vue"
import {addProduct, findProduct} from "@/apis/zyj/Process.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  addProductDialog: Boolean,
  code: String
})

const emit = defineEmits(['close'])

const visible = ref(true)
const form = ref({
  procedureCode: '',
  productCode: '',
  productName: '',
  unit: '',
  specification: '',
  remark: ''
})

const selectProduct = ref(false)

const selectedRank = () => {
  selectProduct.value = true;
}

const handleCancel = () => {
  form.value = {}
  emit('close')
}

const handleConfirm = () => {
  form.value.procedureCode = props.code
  //先查询产品是否已经在其他产品制程中（一个产品只能在一个工艺上）
  findProduct(form.value.productCode,1).then(res=>{
    if(!res){
      ElMessage.error('该产品已存在于其他工艺，请选择其他产品')
    }else {
      addProduct(form.value).then(res => {
        if (res == '成功') {
          ElMessage.success('添加成功')
          handleCancel()
        } else {
          ElMessage.error('添加失败')
        }
      })
    }
  })
}
const closeProduct = () => {
  selectProduct.value = false;
}
const dataProduct = (data) => {
  form.value.productCode = data.materialProductCode;
  form.value.productName = data.productName;
  form.value.unit = data.unitName;
  form.value.specification = data.specificationAndModel;
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>